@startuml
title Диаграмма пересылки сообщений между компонентами расширения Message Sender

participant inject_script.js as inject_script
participant content_script.js as content_script
participant options.js as options
participant popup.js as popup
participant devtools.js as devtools
participant background.js as background

== Отправка сообщения со страницы веб-приложения к компоненту options через компонент content_script ==
inject_script -> inject_script: Нажатие по элементу с тэгом: DIV и тестом: "785"
inject_script -> content_script: A1: Исходящее сообщение:\n{"tagName":"DIV","text":"785"}
content_script -> options: A2: Пересылка сообщения по адресу: options\nИсходящее сообщение:\n{"tagName":"DIV","text":"785"}
options -> content_script: A3: Отправка ответа по адресу: content_script\nИсходящее сообщение:\n"options OK"
content_script -> inject_script: A4: Отправка положительного ответа в inject_script\nИсходящее сообщение:\n"Сообщение успешно отправлено в компонент options.js"

== Отправка сообщения от компонента popup к компоненту devtools ==
popup -> popup: Ввод текста сообщения и нажатие кнопки 'Отправить'
popup -> devtools: B1: Исходящее сообщение:\n"Сообщение от компонента popup"
devtools -> popup: B2: Отправка ответа по адресу: content_script\nИсходящее сообщение:"devtools OK"

== Отправка сообщения от компонента options к компоненту devtools ==
options -> options: Ввод текста сообщения и нажатие кнопки 'Отправить'
options -> devtools: C1: Исходящее сообщение:\n"Текст сообщения"
devtools -> options: C2: Отправка ответа по адресу: content_script\nИсходящее сообщение:"options OK"

@enduml